<template>
    <div id="categorylist">
    <h4> 分类页列表</h4>
        <div class="content">
            <van-tabs v-model="tabActive">
                <van-tab :title="item.name" v-for="(item,index) in clist" :key="'categorylist'+index">
                    <h4>{{item.front_desc}}</h4>
                    <p>{{item.front_name}}</p>
                    <van-grid :border="true" :column-num="2">
                        <van-grid-item v-for="(item2,index2) in itemlist" :key="'value'+index2" 
                            :to="'/product/'+item2.id">
                            <van-image
                                width="100"
                                height="100"
                                :src="item2.list_pic_url"
                            />
                            <h6 class="van-ellipsis">{{item2.name}}</h6>
                            <p class="retail_price">￥{{item2.retail_price}}</p>
                        </van-grid-item> 
                    </van-grid>
                </van-tab>  
            </van-tabs>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import api from '../assets/config/api.js'
export default {
    props:["id"],
    data(){
        return{
             tabActive:0,
             clist:{},
             itemlist:{}
        }
    },
    async created(){
        let res=await axios.get(api.GoodsCategory,{ params:{id:this.id} });
        console.log(res.data);
        this.clist=res.data.data.brotherCategory;
        // console.log( this.list);
         let id=this.clist[0].id;
        this.getcategory(id,1,20);
    },
    watch:{
        tabActive: async function(index){
            let id=this.clist[index].id;
            let page=1;
            let size=20;
            this.getcategory(id,page,size);
            //res.data.data.data
           
        }
    },
    methods:{
        async getcategory(cid,page,size){
            let res=await axios.get(api.GoodsList,{params:{categoryId:cid,page,size}});
            this.itemlist=res.data.data.goodsList;
            console.log( this.itemlist);
       }
    },
    
}
</script>
<style lang="less">
    #categorylist{
        .content{
            .van-ellipsis{
                width: 100%;
                font-size: 14px;
                font-weight: 500;
                padding: 0 10px;
            }
            .van-grid-item{
                width: 187.6px;
                
                box-sizing: border-box;
            }
            .retail_price{
                position: absolute;
                bottom: 4px;
            }
        }
    }
</style>